<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/xhs.css" />
<link rel="stylesheet" href="css/list_shops.css" />
<style type="text/css">
#list {
	/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
	margin-top: -1px;
}

.ee p:nth-of-type(1) {
	overflow: hidden;
	word-break: break-all;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	width: 160px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

.ee p:nth-of-type(2) {
	
}

.ee p:nth-of-type(2) span:nth-of-type(1) {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	display: inline-block;
}

.ee p:nth-of-type(2) span:nth-of-type(1) img {
	width: 25px;
	height: 25px;
	margin-left: -50hpx;
}

.ee p:nth-of-type(2)>span:nth-of-type(2) {
	overflow: hidden;
	white-space: pre-wrap;
	width:85px;
	text-overflow: ellipsis;
	-webkit-line-clamp:1 ;
	display: inline-block;
}

.ee p:nth-of-type(2) span:nth-of-type(3) {
	display: inline-block;
	margin-top: -15px;
	vertical-align: middle;
}
.lun_b{
	border:1px solid black;
	display: inline-block;
	height:350px;
}
.tupian_tui{
	
}
</style>
</head>

<body style="padding-bottom: 0;">
	<div>
		<div class="top">
			<div class="miu-top">
				<span>关注</span> <span>发现</span> <span>洛阳</span>
			</div>
			<div class="search">
				<input type="text" name="search" placeholder="大家都在搜“动漫剧场版”" />
			</div>
		</div>
		<div class="k">
		<div class="cen">
			<c:forEach items="${notesList }" var="notes">
			
				<a href="notesId?notesId=${notes.notesId }" class="lun_b">
					<div class="lun_a">
						<img src="img/${notes.picture }" class="tupian_tui" />
						<div class="ee">
							<p style="width: 100%;margin-left: 0px;">${notes.title }</p> 
							<p>
								<span><img src="img/${notes.avatar }" /></span> <span>${notes.username }</span>
								<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="22" height="22"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747">1448</path></svg>
		                		<span>${notes.like }</span>
							</p>
						</div>
					</div>
				</a>
				
			</c:forEach>

			<!-- <a href="" class="lun_b">
						<div class="lun_a">
							<img src="img/baobao1.jpg" class="tupian_tui" />
							<div class="ee">
		                		<p>站站的深情告白❤要不要答应，看你们了秋川干货</p>
		                		<p><span><img src="img/baojian.png"/></span>
		                			<span>xiaozha111111n</span>
		                			<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="22" height="22"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747">1448</path></svg>
		                				<span>1448</span>
		                		</p>
		                	</div>
						</div>
				</a> -->
			<!-- <a href="" class="lun_b">
						<div class="lun_a">
							<img src="img/baobao1.jpg" class="tupian_tui" />
							<div class="ee">
		                		<p>站站的深情告白❤要不要答应，看你们了秋川干货</p>
		                		<p><span><img src="img/baojian.png"/></span>
		                			<span>xiaozha111111n</span>
		                			<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="22" height="22"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747">1448</path></svg>
		                				<span>1448</span>
		                		</p>
		                	</div>
						</div>
				</a>
				<a href="" class="lun_b">
						<div class="lun_a">
							<img src="img/baobao1.jpg" class="tupian_tui" />
							<div class="ee">
		                		<p>站站的深情告白❤要不要答应，看你们了秋川干货</p>
		                		<p><span><img src="img/baojian.png"/></span>
		                			<span>xiaozha111111n</span>
		                			<svg t="1566708071421" class="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4467" width="22" height="22"><path d="M512 868.04c-3.36 0-6.71-0.81-9.76-2.44-4.11-2.19-101.77-54.63-200.96-140.63C165.73 607.45 97 489.31 97 373.83c0-120.14 97.74-217.87 217.88-217.87 100.98 0 167.42 63.62 197.13 99.95 29.71-36.33 96.14-99.95 197.13-99.95C829.26 155.96 927 253.7 927 373.83c0 115.48-68.73 233.62-204.28 351.14-99.19 85.99-196.85 138.44-200.96 140.63-3.05 1.63-6.4 2.44-9.76 2.44zM314.88 197.46c-97.25 0-176.38 79.12-176.38 176.37 0 225.47 313.68 415.51 373.49 449.69 59.82-34.21 373.51-224.45 373.51-449.69 0-97.25-79.12-176.37-176.38-176.37-114.51 0-178.74 103.37-179.37 104.41a20.792 20.792 0 0 1-17.74 9.98h-0.05c-7.26-0.02-13.99-3.81-17.74-10.02-0.61-1-64.84-104.37-179.34-104.37z" p-id="4468" fill="#474747">1448</path></svg>
		                				<span>1448</span>
		                		</p>
		                	</div>
						</div>
				</a> -->
		</div>
		</div>
		<div class="down">
			<div class="down-div">
				<div class="down-span" id="s">首页</div>
				<div class="down-span" id="c">商城</div>
				<div class="down-span">
					<img src="img/plus-circle.png" width="40px" height="40px" />
				</div>
				<div class="down-span" id="x">消息</div>
				<div class="down-span" id="w">我</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<script src="js/mui.min.js"></script>

	<script type="text/javascript">
		$(function() {
			$("#s").click(function() {
				window.location.href = "index.jsp";
			})
			$("#c").click(function() {
				window.location.href = "test_index.jsp";
			})
			$("#x").click(function() {
				window.location.href = "xinxi.jsp";
			})
			$("#w").click(function() {
				window.location.href = "wo.jsp";
			})
		})
	</script>
</body>

</html>